<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED数字</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

       .digit-container {
            display: flex;
            align-items: center;
        }

       .digit {
            width: 60px;
            height: 100px;
            margin: 0 2.5px;
            position: relative;
        }

       .digit .segment {
            background: #c00;
            border-radius: 2.5px;
            position: absolute;
            opacity: 0.15;
            transition: opacity 0.2s;
        }

       .digit .segment.on,
       .separator {
            opacity: 1;
            box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
            transition: opacity 0s;
        }

       .digit .segment:nth-child(1) {
            top: 5px;
            left: 10px;
            right: 10px;
            height: 5px;
        }

       .digit .segment:nth-child(2) {
            top: 10px;
            right: 5px;
            width: 5px;
            height: calc(50% - 12.5px);
        }

       .digit .segment:nth-child(3) {
            bottom: 10px;
            right: 5px;
            width: 5px;
            height: calc(50% - 12.5px);
        }

       .digit .segment:nth-child(4) {
            bottom: 5px;
            right: 10px;
            left: 10px;
            height: 5px;
        }

       .digit .segment:nth-child(5) {
            bottom: 10px;
            left: 5px;
            width: 5px;
            height: calc(50% - 12.5px);
        }

       .digit .segment:nth-child(6) {
            top: 10px;
            left: 5px;
            width: 5px;
            height: calc(50% - 12.5px);
        }

       .digit .segment:nth-child(7) {
            bottom: calc(50% - 2.5px);
            right: 10px;
            left: 10px;
            height: 5px;
        }

       .separator {
            width: 10px;
            height: 100px;
            position: relative;
            margin: 0 5px;
        }

       .separator::before,
       .separator::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            background: #c00;
            border-radius: 50%;
            opacity: 1;
            box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
        }

       .separator::before {
            top: 30px;
        }

       .separator::after {
            bottom: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="digit-container">
            <div v-for="(digit, index) in timeDigits" :key="index">
                <template v-if="digit === 'separator'">
                    <div class="separator"></div>
                </template>
                <template v-else>
                    <div class="digit">
                        <div :class="['segment', i? 'on' : '']" v-for="i in digits[digit]"></div>
                    </div>
                </template>
            </div>
        </div>
    </div>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                    digits: [
                        // 数字 0
                        [1, 1, 1, 1, 1, 1, 0],
                        // 数字 1
                        [0, 1, 1, 0, 0, 0, 0],
                        // 数字 2
                        [1, 1, 0, 1, 1, 0, 1],
                        // 数字 3
                        [1, 1, 1, 1, 0, 0, 1],
                        // 数字 4
                        [0, 1, 1, 0, 0, 1, 1],
                        // 数字 5
                        [1, 0, 1, 1, 0, 1, 1],
                        // 数字 6
                        [1, 0, 1, 1, 1, 1, 1],
                        // 数字 7
                        [1, 1, 1, 0, 0, 0, 0],
                        // 数字 8
                        [1, 1, 1, 1, 1, 1, 1],
                        // 数字 9
                        [1, 1, 1, 1, 0, 1, 1]
                    ],
                    timeDigits: []
                };
            },
            mounted() {
                this.updateTime();
                setInterval(() => {
                    this.updateTime();
                }, 1000);
            },
            methods: {
                updateTime() {
                    const now = new Date();
                    const hours = String(now.getHours()).padStart(2, '0');
                    const minutes = String(now.getMinutes()).padStart(2, '0');
                    const seconds = String(now.getSeconds()).padStart(2, '0');
                    this.timeDigits = [
                        ...hours.split(''),
                        'separator',
                        ...minutes.split(''),
                        'separator',
                        ...seconds.split('')
                    ];
                }
            }
        });
        app.mount('#app');
    </script>
</body>

</html>    